<template>
  <t-box>
    <div class="user-info" v-if="userInfo">
      <el-row>
        <el-col :span="3">
          <div class="avatar">
            <el-avatar
              fit="cover"
              :size="100"
              :src="
                userInfo.HeadPortraitShow ? userInfo.HeadPortraitShow.Url : ''
              "
            ></el-avatar>
            <p
              class="name hover-class type-primary"
              @click="toPath('updateAvatar')"
            >
              修改头像
            </p>
          </div>
        </el-col>
        <el-col :span="9" :offset="1">
          <t-title class="t-m-b-20">基本信息</t-title>
          <el-form label-width="100px" label-position="left">
            <el-form-item label="账号：">
              <div class="t-flex">
                <p>{{ userInfo.LoginName || "-" }}</p>
                <p
                  class="hover-class type-primary t-m-l-50"
                  @click="toPath('updatePwd')"
                >
                  修改密码
                </p>
              </div>
            </el-form-item>
            <el-form-item label="用户姓名：">
              <p>{{ userInfo.RealName || "-" }}</p>
            </el-form-item>
            <el-form-item label="所属组织：">
              <p>{{ userInfo.DeptLevelDesc || "-" }}</p>
            </el-form-item>
            <el-form-item label="职位：">
              <p>{{ userInfo.RankName || "-" }}</p>
            </el-form-item>
            <el-form-item label="手机号码：">
              <p>{{ userInfo.Phone || "-" }}</p>
            </el-form-item>
            <el-form-item label="在职状态：">
              <p>{{ userInfo.UserStatusShow || "-" }}</p>
            </el-form-item>
            <el-form-item label="登录状态：">
              <p
                :class="
                  userInfo.AccountStatus == 1 ? 'type-success' : 'type-error'
                "
              >
                {{ userInfo.AccountStatusShow || "-" }}
              </p>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </t-box>
</template>
<script>
export default {
  data() {
    return {
      userInfo: null,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      this.$store.dispatch("handleUserInfo").then((res) => {
        if (res.data.code === 0) {
          this.userInfo = res.data.data;
        }
      });
    },
    toPath(path) {
      this.$router.push({
        path: "/" + path,
        query: {
          id: this.userInfo.ID,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.user-info {
  .avatar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  p {
    line-height: 1;
  }
}
</style>